window.addEventListener('load', function () {
  var arrow_l = document.querySelector('.arrow-l');
  var arrow_r = document.querySelector('.arrow-r');
  var focus = document.querySelector('.focus');
  var focusWidth = focus.offsetWidth;
  // console.log(focusWidth);
  // 经过focus 显示隐藏  左右小箭头
  focus.addEventListener('mouseenter', function () {
    arrow_l.style.display = 'block';
    arrow_r.style.display = 'block';
    clearInterval(timer);
    timer = null;  // 清除定时器
  });

  focus.addEventListener('mouseleave', function () {
    arrow_l.style.display = 'none';
    arrow_r.style.display = 'none';
    timer = setInterval(function () {
      arrow_r.click();
    }, 2000)

  });
  // 动态生成 小圆圈  有几张图 几个圆圈 ul.children.length决定
  var ul = focus.querySelector('ul');
  var ol = focus.querySelector('.circle');
  for (var i = 0; i < ul.children.length; i++) {
    // 循环 创建一个  li
    var li = document.createElement('li');
    // 自定义属性 setAttribute 记录小圆圈的索引
    li.setAttribute('index', i);

    // 插入li 到 ol 里面
    ol.appendChild(li);

    // 小圆圈排他思想
    li.addEventListener('click', function () {
      for (var i = 0; i < ol.children.length; i++) {
        ol.children[i].className = '';
      };
      this.className = 'current';

      // 点击小圆圈 移动图片 ul
      // 获得自定义属性 getAttribute
      var index = this.getAttribute('index');
      // ul移动距离就是  index索引 * 图片宽度 往左移动时负值
      num = index;
      circle = index;
      var target = -index * focusWidth;
      animate(ul, target);
    })
  };
  // ol第一个 li 设置类名 current 默认选中
  ol.children[0].className = 'current';

  // 克隆图片 放到ul 最后面
  var first = ul.children[0].cloneNode(true);
  ul.appendChild(first);
  // 点击按钮 切换图片
  var num = 0;
  // circle控制小圆圈的播放
  var circle = 0;
  var flag = true;
  // flag 节流阀
  arrow_r.addEventListener('click', function () {     // 右按钮
    if (flag) {
      flag = false;
      // 走到了最后一张复制的图片 ul 要快速复原 left 改为 0 
      if (num == ul.children.length - 1) {
        ul.style.left = 0;
        num = 0;
      }
      num++;
      // 这里的回掉函数 等动画函数执行完毕才执行 把 flag 重新赋值 true
      animate(ul, -num * focusWidth, function () {
        flag = true; // 打开节流阀
      });

      //  circle变量控制小圆圈一起变化
      circle++;
      // circle == 4  说明走到了克隆的图片 就复原circle为0
      if (circle == ol.children.length) {
        circle = 0;
      }
      circleChange();
      // 清除其他圆圈的 类名 current
      // for (var i = 0; i < ol.children.length; i++) {
      //     ol.children[i].className = '';
      // };
      // ol.children[circle].className = 'current';
    }
  });


  arrow_l.addEventListener('click', function () {     // 左侧按钮
    if (flag) {
      flag = false;
      // 走到了最后一张复制的图片 ul 要快速复原 left 改为 0 
      if (num == 0) {
        num = ul.children.length - 1;
        ul.style.left = -num * focusWidth + 'px';

      }
      num--;
      animate(ul, -num * focusWidth, function () {
        flag = true;
      });

      //  circle变量控制小圆圈一起变化
      circle--;
      // circle < 0  说明走到了克隆的图片 就复原circle为0
      if (circle < 0) {
        circle = ol.children.length - 1;
      }
      circleChange();
      // 清除其他圆圈的 类名 current
      // for (var i = 0; i < ol.children.length; i++) {
      //     ol.children[i].className = '';
      // };
      // ol.children[circle].className = 'current';
    }
  });

  function circleChange () {
    for (var i = 0; i < ol.children.length; i++) {
      ol.children[i].className = '';
    };
    ol.children[circle].className = 'current';
  }

  // 10.自动播放轮播图
  var timer = setInterval(function () {
    arrow_r.click();
  }, 2000)
})